<template>
  <div class="goodsItem" :model="goodsInfo">
    <div v-if="goodsInfo.goodsId">
      <el-image :src="goodsInfo.picUrl" />
      <span>{{ goodsInfo.goodsName }}</span>
    </div>
    <div v-else>
      <el-button type="text" @click="addCommodity">添加商品</el-button>
    </div>
    <select-goods-dialog ref="dialog" @select="select" />
  </div>

</template>

<script>
import SelectGoodsDialog from '@/components/SelectGoodsDialog'

export default {
  name: 'GoodsItem',
  components: { SelectGoodsDialog },
  props: {
    index: {
      type: Number,
      required: true
    },
    num: {
      type: Number,
      required: true
    },
    goods: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      goodsInfo: {
        goodsId: '',
        picUrl: '',
        goodsName: '',
        cost: '',
        orginalPrice: '',
        weight: ''
      }
    }
  },
  mounted() {
    if (this.goods) {
      this.goodsInfo.goodsId = this.goods.goodsId
      this.goodsInfo.goodsName = this.goods.goodsName
      this.goodsInfo.picUrl = this.goods.goodsImg
      this.goodsInfo.orginalPrice = this.goods.orginalPrice
      this.goodsInfo.cost = this.goods.cost
      this.goodsInfo.weight = this.goods.weight
    }
  },
  methods: {

    getData() {
      const vm = this
      return vm.goodsInfo
    },
    select(goods) {
      const vm = this
      if (goods) {
        console.log(goods)
        vm.goodsInfo.goodsId = goods.goodsId
        vm.goodsInfo.goodsName = goods.goodsName
        vm.goodsInfo.picUrl = goods.goodsImg
        this.goodsInfo.orginalPrice = goods.orginalPrice
        this.goodsInfo.cost = goods.cost
        this.goodsInfo.weight = goods.weight
        vm._value = goods
        vm.$emit('change', vm._value)
        vm.$emit('getExtraSpecInfo', vm.index, vm.goodsInfo, vm.num)
        vm.$forceUpdate()
      }
    },
    addCommodity() {
      const vm = this
      vm.$refs.dialog.show()
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsItem {
  .ele-dialog-title{
    text-align: left;
  }
  .ele-div-keysearch {
    display: flex;
    justify-content: space-between;
    .search-left {
      width: 50%;
      ::v-deep.el-select,
      .ele-input,
      .el-button {
        margin-left: 15px;
      }
      ::v-deep.el-select {
        width: 100px;
      }
    }
    .search-flex {
      display: flex;
      ::v-deep.el-button {
        margin-left: 15px;
      }
    }
  }
  .ele-table {
    width: 100%;
    margin-top: 40px;
    .ele-div-footer {
      display: flex;
      justify-content: space-between;
      margin: 50px 0px 100px 0px;
      .footer-left {
        ::v-deep.el-button {
          width: 100px;
          margin: 0px;
        }
      }
    }
  }
}

</style>
